<script setup lang="ts">
import { ref } from "vue";
import type { UploadInstance, UploadRequestOptions } from "element-plus";
import { upload } from "@/api/employee";
import { message } from "@/utils/message";
import { useStompJsStoreHook } from "@/store/modules/webSocket";
import { divisionOperation, multiplication } from "@pureadmin/utils";

const loading = ref(false);
const show = ref(false);
const uploadRef = ref<UploadInstance>();

const err = ref([]);
const percentage = ref(0);
const format = (percentage: number) =>
  percentage === 100 ? "解析完成" : `表格上传成功，正在解析${percentage}%`;

const submit = () => {
  uploadRef.value!.submit();
};

const doUpload = async (options: UploadRequestOptions) => {
  loading.value = true;
  show.value = false;
  err.value = [];
  return upload(options.file)
    .then(res => {
      show.value = true;
      const topic = `/queue/import/${res}`;
      useStompJsStoreHook().Subscribe<string>(
        topic,
        rate => {
          let split = rate.split(",");
          const total = Number(split[0]);
          const complete = Number(split[1]);
          if (split.length === 3) {
            err.value.push(split[2]);
          }
          if (total === complete) {
            percentage.value = 100;
            useStompJsStoreHook().UnSubscribe(topic);
            loading.value = false;
          } else {
            percentage.value = multiplication(
              divisionOperation(complete, total, 2),
              100,
              1
            );
          }
        },
        false
      );
    })
    .catch(err => {
      message(`上传失败:${err.message}`, { type: "error" });
      loading.value = false;
    });
};
</script>

<template>
  <div>
    <el-upload
      ref="uploadRef"
      :http-request="doUpload"
      :limit="1"
      :auto-upload="false"
      accept=".xlsx"
    >
      <template #trigger>
        <el-button :loading="loading">选择表格</el-button>
      </template>
      <el-button :loading="loading" class="ml-3" type="primary" @click="submit">
        上传
      </el-button>
      <template #tip>
        <div class="el-upload__tip">
          请按照指定的模版格式上传，
          <a class="text-blue-500">下载模版</a>
        </div>
      </template>
    </el-upload>
    <el-progress
      v-if="show"
      text-inside
      :stroke-width="20"
      :percentage="percentage"
      class="my-4"
      :format="format"
    />
    <el-alert
      v-if="err.length > 0"
      title="解析失败的数据请调整后以新的数据表上传"
      type="error"
      :closable="false"
      show-icon
    />
    <el-scrollbar v-if="err.length > 0" :max-height="100" class="mb-4">
      <p v-for="(item, index) in err" :key="index" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
